<template>

  <el-tabs type="card">
    <el-tab-pane label="岗位设置">
      <el-table
          ref="joblist"
          :border="true"
          :data="jobList"
          max-height="680"
          style="width: 100%"
      >
        <el-table-column label="序号" width="80">
          <template slot-scope="scope">
              <span v-show="scope.row.changeNow !== undefined">
                {{ scope.$index + 1 }}</span>
          </template>
        </el-table-column>
        <el-table-column
            v-for="job in jobSettings"
            :key="job.label"
            :label="job.label"
            align="center"
            header-align="center"
        >
          <template slot-scope="scope">
            <div v-show="scope.row.changeNow !== undefined">
                <span v-show="!scope.row.changeNow">
                  {{ scope.row[job.target] }}</span
                >
              <el-input
                  v-show="scope.row.changeNow"
                  v-model="scope.row[job.target]"
              />
            </div>
            <div v-show="scope.row.addNow !== undefined">
              <span v-show="!scope.row.addNow"> {{ scope.row.jobName }}</span>
              <el-input
                  v-show="scope.row.addNow"
                  v-model="scope.row[job.target]"
              />
            </div>
          </template>
        </el-table-column>
        <el-table-column
            align="center"
            fixed="right"
            label="操作"
            width="150">
          <template slot-scope="scope">
            <div>
              <div v-show="scope.row.changeNow !== undefined">
                <el-button
                    plain
                    size="medium"
                    type="danger"
                    @click="handleDelJob(scope.row)"
                >
                  删除岗位
                </el-button>
              </div>
              <div v-show="scope.row.addNow !== undefined">
                <el-button
                    v-show="
                      scope.row.changeNow === undefined && !scope.row.addNow
                    "
                    plain
                    size="medium"
                    type="primary"
                    @click="toSetNewJobInfo(scope.row)"
                >添加岗位
                </el-button>
                <el-button
                    v-show="
                      scope.row.changeNow === undefined && scope.row.addNow
                    "
                    plain
                    size="medium"
                    type="success"
                    @click="toSubmitNewJobInfo(scope.row)"
                >确定新建
                </el-button>
              </div>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </el-tab-pane>
  </el-tabs>

</template>

<script>
export default {
  name: "jobSetting",
  data () {
    return {
      jobList: [],
      jobSettings: [
        {
          label: "岗位名称",
          target: "jobName",
        },
        {
          label: "岗位职责",
          target: "jobDuty",
        },
      ],
    };
  },
  methods: {
    async getJobList () {
      const res = await this.$http.getJobAll();
      if (res.code !== 0) return null;
      for (const each of res.data) {
        this.jobList.push(
            {
              ...each,
              changeNow: false,
            });
      }
      // 最后一个岗位是为了添加
      this.jobList.push({
        jobName: "",
        jobScore: "",
        jobDuty: "",
        addNow: false,
      });
    },

    // 修改岗位信息
    toSetNewJobInfo (info) {
      if (info.addNow !== undefined) {
        info.addNow = true;
      }
    },
    async toSubmitNewJobInfo (info) {
      if (!info.jobDuty || !info.jobName) return this.$message.warning("请填写信息");
      if (info.addNow !== undefined) {
        info.addNow = false;
        info.jobScore = "12";
        info.addNow = null;
        const res = await this.$http.jobReleaseJob(info);

        if (res.code !== 0) return null;
        // 如果添加成功就刷新界面
        this.$router.go(0);
      }
    },
    // 删除岗位
    async handleDelJob (info) {
      const res = await this.$http.jobDeleteJob(info.jobId);
      if (res.code !== 0) return null;
      this.$router.go(0);
    },
  },
  mounted () {
    this.getJobList();
  },
};
</script>
